<template>
  <div class="navTop-box">
    <div class="logo">
      <div></div>
    </div>
    <div class="to-home">
      <router-link to="/" class="home" style="cursor: pointer"
        >首页</router-link
      >
    </div>
    <div class="search">
      <div class="input-box">
        <el-input
          size="small"
          placeholder="请输入内容"
          v-model="input"
          @keyup.enter.native="setContent"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <div class="hander-contribute">
      <img
        v-if="isLogin&&!isAdmin"
        :src="user.handUrl"
        @click="toUser"
        style="cursor: pointer"
      />
      <div
        class="navhander"
        style="cursor: pointer"
        v-else
        @click="toUser"
      >
     
        {{ isLogin?user.name :'login'}}
      </div>
    </div>

    <el-dialog
      :title="isLoginBtn ? '欢迎回来' : '注册pilipili'"
      :visible.sync="dialoger"
      width="48%"
      center
    >
      <Login
        v-if="isLoginBtn"
        @login="signin"
        @register="isLoginBtn = false"
      ></Login>
      <Register @register="signup" @login="isLoginBtn = true" v-else></Register>
    </el-dialog>
  </div>
</template>

<script>
import Login from "/src/pages/Login";
import Register from "/src/pages/register";
import { mapGetters } from "vuex";
export default {
  props: ["handurl"],
  data() {
    return {
      input: "",
      dialoger: false,
      isLoginBtn: true,
    };
  },
  components: {
    Login,
    Register,
  },
  computed: {
    ...mapGetters(["user", "isLogin", "baseUrl", "isAdmin"]),
  },
  methods: {
    
    toUser(){
      if(!this.isLogin) {
        this.dialoger = true ;
        return
      }
      if(this.isAdmin){
        this.$router.push('/dashboard')
        return
      } 
      this.$router.push('/userinfo')
    },
    signin(res) {
      if (res.code == 200) {
        this.$msg.fail("欢迎回来！");
        this.dialoger = false
      } else{
        this.$msg.fail(res.msg)
      }
      
    },

    signup(res){
      if (res.code == 200) {
        this.$msg.fail("注册成功，请重新登录！");
        this.isLoginBtn = true
      } else{
        this.$msg.fail(res.msg)
      }
      
    } ,

    setContent() {
      if (this.input == "") {
        this.$msg.fail("输入内容不能为空！");
        return;
      }

      let routeInfo = this.$router.resolve({
        path: `/search`,
        query: { content: this.input },
      });
      window.open(routeInfo.href, "_blank");
      this.input = "";
    },
  },
};
</script>

<style lang = "less" scoped>
.navTop-box {
  z-index: 999;
  width: 100%;
  height: 3.5vw;
  background-color: white;
  display: flex;
  border-bottom: 1px solid rgb(180, 171, 171);
}

img {
  height: 2.5vw !important;
  width: 2.5vw !important;
  border-radius: 50%;
}
.to-home {
  margin-left: 1vw;
  margin-top: 1.35vw;
  .home {
    color: rgb(138, 128, 128);
  }
}
.search {
  flex: 1;
  height: 3.5vw;
  .input-box {
    height: 90%;
    margin-top: 0.6vw;
    margin-left: 35%;
    width: 28vw;
    overflow: hidden;
  }
}
.hander-contribute {
  height: 3.5vw;
  width: 18vw;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  .navhander {
    height: 2.5vw;
    width: 2.5vw;
    line-height: 2.5vw;
    text-align: center;
    color: white;
    border-radius: 50%;
    font-size: .8rem;
    background-color: #00aeec;
    background-size: cover;
  }

  div:nth-child(2) {
    i {
      z-index: 9;
      transform: translate(-4.5vw, 0);
      color: white;
    }
  }
  .contribute {
    border-radius: 8%;
    padding: 0.6vw;
    padding-left: 2vw;
    padding-right: 1vw;
    background-color: #fb7299;
    color: white;
    font-size: 1rem;
    margin-left: 3vw;
  }
}
.logo {
  height: 100%;
  width: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  div {
    height: 100%;
    width: 80%;
    background: url("/images/logo.png") no-repeat center center;
  }
}
</style>